<template>
    <div>
        <a-row>
            <a-col :span="24">
                <a-card :bordered="false">
                    <a slot="title" href="#" style="color: #038181; font-weight: bold; font-size: 16px;">数据统计</a>
                    <a-row style="text-align: center;">
                        <a-col :span="6">
                            <a-statistic title="人才总数" :value="countResult.talentCount" />
                        </a-col>
                        <a-col :span="6">
                            <a-statistic title="成果总数" :value="countResult.fruitCount" />
                        </a-col>
                    </a-row>
                    <a-divider />
                    <a-row>
                        <a-col span="24" style="font-weight: bold; font-size: 15px;">成果统计</a-col>
                    </a-row>
                    <div>
                        <div ref="fruitBarChart" style=" height: 550px; width: 100%;"></div>
                    </div>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>

import {postAction} from "@/api/manage";
import * as echarts from "echarts";

export default {
    name: 'TalentMenu',
    data() {
        return {
            countResult: {},
            searchObj: {}
        }
    },
    computed: {},
    created(){
        this.getCount();
        this.getFruitData();
    },
    methods: {
        getCount(){
            let url = "/ndTalent/statistics/getNumCount";
            postAction(url, {}).then(res => {
                if (res.data.success) {
                    this.countResult = res.data.result;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getFruitData(){
            let url = "/ndTalent/statistics/getFruitDataChart";
            this.isHaveWordData = false;
            postAction(url, {}).then(res => {
                if (res.data.success) {
                    this.buildRankTalentChart(res.data.result);
                }
            }).catch(err => {
                console.log(err)
            })
        },
        buildRankTalentChart(fruitData){
            let fruitChart = echarts.init(this.$refs.fruitBarChart);
            let xAxisData = fruitData.map(item=>{
                return item.name
            })
            let seriesData = fruitData.map(item=>{
                return item.count
            })
            fruitChart.setOption({
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        inside: false,
                        color: '#000',
                        interval: 0,
                        formatter: function(value) {
                            return value
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    alwaysShowContent: true,
                    trigger: 'axis',
                    extraCssText:'z-index: 7',
                    backgroundColor: '#FFFFFF',
                    textStyle:{
                        color: '#3c3520'
                    }
                },
                series: [
                    {
                        data: seriesData,
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#79DBBA' },
                                { offset: 0.5, color: '#3FA598' },
                                { offset: 1, color: '#008080' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#79DBBA' },
                                    { offset: 0.5, color: '#3FA598' },
                                    { offset: 1, color: '#008080' }
                                ])
                            }
                        },
                    }
                ]
            }, true);

            setTimeout(function () {
                fruitChart.resize();
            }, 10)
        },
    }
}
</script>
